<template>
  <el-dialog v-model="visible" :show-close="false" width="500">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div class="title">
          <img :src="Warn" class="warn-icon" />
          <h3>是否删除该条消息？</h3>
        </div>
        <div class="close-btn" @click="visible = false">
          <el-icon><Close /></el-icon>
        </div>
      </div>
    </template>

    <div class="delete-body">删除后，聊天记录不可恢复，对话内的文件也将彻底删除。</div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="danger" @click="handleDelete"> 删除 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Warn from '@/assets/png/warn.png'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const handleVisible = () => {
  visible.value = true
}
defineExpose({
  handleVisible
})

const handleDelete = () => {
  visible.value = false
  ElMessage({
    message: '删除成功',
    type: 'success'
  })
}
</script>
<style scoped lang="less">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;

  .title {
    display: flex;
    align-items: center;

    .warn-icon {
      width: 24px;
      margin-right: 10px;
    }
  }

  .close-btn {
    font-size: 20px;
    transform: translate(15px, 0);
    cursor: pointer;
  }
}

.delete-body {
  font-size: 17px;
}
</style>
